<template>
  <div class="container">
    <div class="target">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <h3>6面轮播</h3>
  </div>
</template>

<script>
</script>


<style scoped lang="scss">
.container > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 150px;
  height: 120px;
  ul {
    width: 100%;
    height: 100%;
    position: relative;
    transform: rotateX(-10deg);
    transform-style: preserve-3d;
    animation: toRotate 10s linear 0s infinite normal;
  }
  ul:hover{
    animation-play-state: paused;
  }
  @keyframes toRotate{
    /* rotateX(-10deg)不变的一定要放在前面 */
    from{
        transform:rotateX(-10deg) rotateY(0deg)
    }
    to{
        transform:rotateX(-10deg) rotateY(360deg)
    }
  }
  ul li {
    position: absolute;
    list-style: none;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    border-radius: 0;
    box-sizing: border-box;
    border: 5px solid Khaki;
  }
  ul li:nth-child(1) {
    background: url('../../../assets/img/01.png') no-repeat;
    background-size: cover;
    transform: rotateY(60deg) translateZ(140px);
  }
  ul li:nth-child(2) {
    background: url('../../../assets/img/02.jpg') no-repeat;
    background-size: cover;
    transform: rotateY(120deg) translateZ(140px);
  }
  ul li:nth-child(3) {
    background: url('../../../assets/img/03.jpg') no-repeat;
    background-size: cover;
    transform: rotateY(180deg) translateZ(140px);
  }
  ul li:nth-child(4) {
    background: url('../../../assets/img/04.png') no-repeat;
    background-size: cover;
    transform: rotateY(240deg) translateZ(140px);
  }
  ul li:nth-child(5) {
    background: url('../../../assets/img/05.jpg') no-repeat;
    background-size: cover;
    transform: rotateY(300deg) translateZ(140px);
  }
  ul li:nth-child(6) {
    background: url('../../../assets/img/06.jpg') no-repeat;
    background-size: cover;
    transform: rotateY(360deg) translateZ(140px);
  }
}
</style>
